
import {HttpService} from '../../service/http.service';
import {Project} from '../../module/project';
import {Component, OnInit} from '@angular/core';
import {ActivatedRoute} from '@angular/router';
import {NgForm} from '@angular/forms';
import {DomSanitizer, Title} from '@angular/platform-browser';

declare var $: any;
@Component({
  selector: 'app-project',
  templateUrl: './project.component.html',
  styleUrls: ['./project.component.css']
})
export class ProjectComponent implements OnInit {

  projectId: number;
  project: Project;
  relatedProject: Project[];
  introduction: any;
  etails: any;
  analysis: any;
  market: any;
  example; any;
  reviews: any;
  commentName = '';
  commentPhone = '';
  recommend = 'Y';
  commentContent = '请问我这个地方有加盟商吗';
  commentContentList: any = [
    {id: '请问我这个地方有加盟商吗', name: '请问我这个地方有加盟商吗'},
    {id: '想了解加盟细节,请尽快寄一份资料', name: '想了解加盟细节,请尽快寄一份资料'},
    {id: '想去贵公司考察,请来电话预约时间', name: '想去贵公司考察,请来电话预约时间'},
    {id: '我想加盟,请电话联系我', name: '我想加盟,请电话联系我'},
    {id: '我对这个项目感兴趣，请电话联系我', name: '我对这个项目感兴趣，请电话联系我'}
  ];

  constructor(private route: ActivatedRoute,
              private httpService: HttpService,
              private titleService: Title,
              private DomSanitizer: DomSanitizer
              ) {
  }

  ngOnInit() {

    this.route.params.subscribe(params => {
      this.projectId = +params['id'];
      this.httpService.getProject(this.projectId).then(r => {
        const buff: string[] = (r.major).split(' ');
        for (let j = 0; j < buff.length; j++) {
          if (buff[j].length < 2) {
            buff.splice(j, 1);
          }
        }
        r.majors = buff;
        this.project = r;
        this.titleService.setTitle('【' + r['name'] + '加盟】_' + r['name'] + '加盟费用多少钱_' + r['name'] + '加盟连锁店招商_315加盟网' );
        // [innerHtml]会去除富文本style,这个操作是不去掉富文本style
        this.introduction = this.DomSanitizer.bypassSecurityTrustHtml(r.introduction);
        this.etails       = this.DomSanitizer.bypassSecurityTrustHtml(r.content);
        this.analysis     = this.DomSanitizer.bypassSecurityTrustHtml(r.analysis);
        this.market       = this.DomSanitizer.bypassSecurityTrustHtml(r.market);
        this.example      = this.DomSanitizer.bypassSecurityTrustHtml(r.example);
        this.reviews      = this.DomSanitizer.bypassSecurityTrustHtml(r.reviews);
        // 获取相关项目
        this.httpService.getRelatedProjectList(this.projectId).then(list => {
          if (list.length > 0) {
            for (let i = 0; i < list.length; i++) {
              const listBuff: string[] = (list[i].major).split(' ');
              for (let j = 0; j < listBuff.length; j++) {
                if (listBuff[j].length < 2) {
                  listBuff.splice(j, 1);
                }
              }
              list[i].majors = listBuff;
            }
            this.relatedProject = list;
            const freeCalljs = '<script type="text/javascript">var web_freecall_company = ' + this.project.callId + ';var web_freecall_itemid = ' + this.project.id + ';WebFreeCall.init();</script>';
            $('#run_call_js').html(freeCalljs);
            $('#otherClass').html(`<script>leaveWords();function leaveWords(){$(".leave-word_main").height(Number($(".leave-word p").length)*100+"%");var txts=document.getElementsByClassName("leave-word_main").item(0);var i=0;function leaveWord(){i++;if(i==$(".leave-word p").length){i=0}if(i==0){txts.style.transition="0s";setTimeout(leaveWord,0)}else{txts.style.transition=".5s"}txts.style.marginTop=-(i*40)+"px"}setInterval(leaveWord,1000)};</script>`);
            $('#run_js').html(this.project.js);
          }
        });
      });
    });
  }

  showPhoneClickEvent() {
    $('.web_freecall_boxs').css('display', 'block');
  }

  hidePhoneClickEvent() {
    $('.web_freecall_boxs').css('display', 'none');
  }

  postCommentClickEvent() {
    if (this.commentName !== '' && this.commentPhone !== '') {
      console.log(this.projectId + '-' + this.commentName + '-' + this.commentPhone + '-' + this.commentContent);
      this.httpService.postComment(this.projectId, this.commentName, this.commentPhone, this.commentContent).then(r => r);
    }
  }

  // 提交方法
  onSubmit(theForm: NgForm) {
    if (theForm['name'] == null || theForm['name'] === '') {
      alert('姓名不能为空!');
      return;
    }
    if (theForm['phone'] == null || theForm['phone'] === '') {
      alert('请输入您的手机号!');
      return;
    }
    this.httpService.setComment(this.projectId, this.commentName, this.commentPhone, this.commentContent, this.recommend).then(r => {
      if (r['code'] === 0) {
        alert('留言成功!');
        this.commentName = '';
        this.commentPhone = '';
        this.recommend = 'Y';
        this.commentContent = '请问我这个地方有加盟商吗';
      } else {
        alert(r['msg']);
      }
    });
  }

  changeShowWay() {
    if ($('.word-detail').css('display') === 'block') {
      $('.word-detail').css('display', 'none');
      $('.poster-detail').css('display', 'block');
      $('.contact-detail').css('display', 'block');
      $('#btn-show-way').html(`详情<img src='../../../assets/images/jiantou.png' id='icon-show-way'>`);
      $('#btn-show-way').attr('class', 'word-right');
      $('#icon-show-way').attr('class', 'arrow-left');

    } else {
      $('.word-detail').css('display', 'block');
      $('.poster-detail').css('display', 'none');
      $('.contact-detail').css('display', 'none');
      $('#btn-show-way').html(`海报页<img src='../../../assets/images/jiantou.png' id='icon-show-way'>`);
      $('#btn-show-way').attr('class', 'word-left');
      $('#icon-show-way').attr('class', 'arrow-right');
    }
  }

}
